<template>
	<l-page>
		<el-form slot="header" :inline="true" label-width="60px" label-position="left">
			<start-end-time ref="child" :get-time="getTime" title="时间段:"></start-end-time>
			<el-form-item>
				<div class="page-search-btn">
					<el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button>
					<el-button icon="el-icon-refresh" type="primary" plain @click="refresh">重置</el-button>
				</div>
			</el-form-item>
		</el-form>
		<div slot="card" class="mb-[24px] flex items-center">
			<l-statistical-card left-name="总收入" :left-value="dataNum.totalOrderRevenue" :right-value="dataNum.todayOrderRevenue" />
			<l-statistical-card left-name="订单数" :left-value="dataNum.orderNum" :right-value="dataNum.todayOrderNum" />
		</div>
		<chart ref="getOrderNumDaily" :begin-time="queryParams.beginTime" :end-time="queryParams.endTime" />
	</l-page>
</template>

<script>
import { data } from '@/api/mall/orderStatistics';
import startEndTime from '@/components/StartEndTime';
import countTo from 'vue-count-to';
import chart from './components/chart';
export default {
	name: 'OrderStatistics',
	components: { startEndTime, countTo, chart },
	data() {
		return {
			queryParams: {
				beginTime: null,
				endTime: null,
			},
			dataNum: {
				orderRevenue: 0,
				todayRevenue: 0,
				totalOrderRevenue: 0,
				todayOrderRevenue: 0,
				orderNum: 0,
				todayOrderNum: 0,
				userNum: 0,
				todayUserNum: 0,
			},
			date: [],
			orderNumData: [],
			orderList: [],
			dateList: [],
			startTime: null,
			endTime: null,
		};
	},
	watch: {
		date(value) {
			if (value) {
				this.queryParams.startTime = value[0];
				this.queryParams.endTime = value[1];
			} else {
				this.queryParams.startTime = null;
				this.queryParams.endTime = null;
			}
		},
	},
	created() {
		this.getData();
	},

	methods: {
		refresh() {
			this.$refs.child.resetTime();
			this.endTime = null;
			this.startTime = null;
			this.date = [];
			this.$nextTick(() => {
				this.search();
			});
		},
		getData() {
			data(this.addDateRange(this.queryParams, this.date)).then((res) => {
				this.dataNum = res.data;
			});
		},
		doHandleMonth(month) {
			var m = month;
			if (month.toString().length === 1) {
				m = '0' + month;
			}
			return m;
		},
		getTime(startTime, endTime) {
			this.queryParams.endTime = endTime;
			this.queryParams.beginTime = startTime;
		},
		search() {
			this.getData();
			this.$refs.getOrderNumDaily.getOrderNumDaily();
		},
	},
};
</script>

<style lang="scss" scoped>
.screen {
	margin-bottom: 24px;
	background: #ffffff;
	padding: 24px;

	.label {
		font-size: 14px;
		padding-right: 24px;
	}
}

.allDiv {
	#myChart {
		margin-top: 20px;
		margin-left: 20px;
	}

	.card {
		margin-top: 20px;
		margin-right: 20px;
		margin-left: 20px;
		margin-bottom: 20px;
	}

	.divNum {
		display: flex;
		justify-content: flex-start;

		.div {
			border-radius: 20px;
			// background-color: #409eff;
			background: url(../../../assets/images/ic_6093.png) no-repeat 100% 100%;
			height: 135px;
			width: 351px;
			flex-shrink: 1;
			// flex: 1;
			margin-left: 20px;
			margin-right: 20px;

			&.second {
				background: url(../../../assets/images/ic_6094.png) no-repeat 100% 100%;
			}

			&.third {
				background: url(../../../assets/images/ic_6095.png) no-repeat 100% 100%;
			}
		}
	}

	.div {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		span {
			font-size: 20px;
			color: white;
		}
	}
}
</style>
